<template>
    <div>

        <el-button type="primary" @click="addQuestionClick" style="margin-left: 1100px" size="small">加入题目</el-button>
        <el-table
                :data="questionList"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="选项 1">
                            <span>{{ props.row.option1 }}</span>
                        </el-form-item>
                        <el-form-item label="选项 2">
                            <span>{{ props.row.option2 }}</span>
                        </el-form-item>
                        <el-form-item label="选项 3">
                            <span>{{ props.row.option3 }}</span>
                        </el-form-item>
                        <el-form-item label="选项 4">
                            <span>{{ props.row.option4 }}</span>
                        </el-form-item>
                        <el-form-item label="正确答案">
                            <span>选项{{ props.row.rightAnswer }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    prop="typeName"
                    label="类型"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="questionDescription"
                    label="题目描述"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="sectionName"
                    label="关联章节">
            </el-table-column>
            <el-table-column
                    prop="difficultyName"
                    label="难度">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="success"
                            @click="questionEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="questionDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="pageChange"
                :page-size="pageSize"
                background
                layout="prev, pager, next"
                :total="questionTotal">
        </el-pagination> <span>每页10条</span>
        <el-dialog style="margin-top: -100px" width="1000px" title="新建题目" :visible.sync="addQuestionVisible">
            <el-form ref="addQuestionForm" :model="addQuestionFormData" :rules="addQuestionFormRules"
                     label-width="100px">
                <el-form-item label="题目描述" prop="questionDescription">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入题目内容"
                            v-model="addQuestionFormData.questionDescription">
                    </el-input>
                </el-form-item>
                <el-form-item label="题型" prop="type">
                    <el-radio-group v-model="addQuestionFormData.type">
                        <el-radio-button style="margin-left: -690px" label="1">选择题</el-radio-button>
                        <el-radio-button label="2">判断题</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-col span="6">
                        <el-form-item label="选项1" prop="option1">
                            <el-input
                                    placeholder="请输入选项1"
                                    v-model="addQuestionFormData.option1">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项2" prop="option2">
                            <el-input
                                    placeholder="请输入选项2"
                                    v-model="addQuestionFormData.option2">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项3">
                            <el-input
                                    placeholder="请输入选项3"
                                    v-model="addQuestionFormData.option3">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项4">
                            <el-input
                                    placeholder="请输入选项4"
                                    v-model="addQuestionFormData.option4">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="正确选项" prop="rightAnswer">
                    <el-radio-group v-model="addQuestionFormData.rightAnswer">
                        <el-radio-button style="margin-left: -550px" label=1>选项1</el-radio-button>
                        <el-radio-button label=2>选项2</el-radio-button>
                        <el-radio-button label=3>选项3</el-radio-button>
                        <el-radio-button label=4>选项4</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择难度" prop="difficulty">
                    <el-select v-model="addQuestionFormData.difficulty" placeholder="请选择" style="margin-left: -640px">
                        <el-option
                                v-for="item in questionDifficulty"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item props="sectionId">
                    <el-cascader-panel

                            @change="cascaderChange"
                            change-on-select
                            filterable
                            v-model="addQuestionFormData.sectionId"
                            :props="props"
                            :options="chapterSection"></el-cascader-panel>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="addQuestionSubmit('addQuestionForm')">确 定</el-button>
        </el-dialog>


        <el-dialog style="margin-top: -100px" width="1000px" title="编辑题目" :visible.sync="editQuestionVisible">
            <el-form ref="editQuestionForm" :model="editQuestionFormData" :rules="editQuestionFormRules"
                     label-width="100px">
                <el-form-item label="题目描述" prop="questionDescription">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入题目内容"
                            v-model="editQuestionFormData.questionDescription">
                    </el-input>
                </el-form-item>
                <el-form-item label="题型" prop="type">
                    <el-radio-group v-model="editQuestionFormData.type">
                        <el-radio-button style="margin-left: -690px" label="1">选择题</el-radio-button>
                        <el-radio-button label="2">判断题</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-row>
                    <el-col span="6">
                        <el-form-item label="选项1" prop="option1">
                            <el-input
                                    placeholder="请输入选项1"
                                    v-model="editQuestionFormData.option1">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项2" prop="option2">
                            <el-input
                                    placeholder="请输入选项2"
                                    v-model="editQuestionFormData.option2">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项3">
                            <el-input
                                    placeholder="请输入选项3"
                                    v-model="editQuestionFormData.option3">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="选项4">
                            <el-input
                                    placeholder="请输入选项4"
                                    v-model="editQuestionFormData.option4">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="正确选项">
                    <el-radio-group v-model="editQuestionFormData.rightAnswer">
                        <el-radio-button  style="margin-left: -550px" label=1>选项1</el-radio-button>
                        <el-radio-button label=2>选项2  </el-radio-button>
                        <el-radio-button   label=3>选项3</el-radio-button>
                        <el-radio-button   label=4>选项4</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="选择难度">
                    <el-select v-model="editQuestionFormData.difficulty" placeholder="请选择" style="margin-left: -640px">
                        <el-option
                                v-for="item in questionDifficulty"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="sectionId">
                    <el-cascader-panel
                            ref="cascaderPanel"
                            @change="editcaderChange"
                            v-model="editQuestionFormData.sectionId"
                            change-on-select
                            filterable
                            :props="props"
                            :options="chapterSection"></el-cascader-panel>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="updateQuestionSubmit('editQuestionForm')">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        inject: ['reload'],
        data() {
            return {
                editRightAnswer: 1,
                courseId: "",
                questionList: [],
                questionTotal: null,
                pageSize: 10,
                addQuestionVisible: false,
                editQuestionVisible: false,
                addQuestionFormData: {
                    courseId: "",
                    type: "",
                    questionDescription: "",
                    option1: "",
                    option2: "",
                    option3: "",
                    option4: "",
                    difficulty: "",
                    sectionId: "",
                    rightAnswer: ""
                },
                editQuestionFormData: {
                    id: "",
                    type: "",
                    questionDescription: "",
                    option1: "",
                    option2: "",
                    option3: "",
                    option4: "",
                    difficulty: "",
                    sectionId: "",
                    rightAnswer: ""
                },
                questionDifficulty: [
                    {
                        value: 1,
                        label: "非常简单"
                    },
                    {
                        value: 2,
                        label: "简单"
                    },
                    {
                        value: 3,
                        label: "中等"
                    },
                    {
                        value: 4,
                        label: "困难"
                    },
                    {
                        value: 5,
                        label: "非常困难"
                    }
                ],
                chapterSection: [],
                props: {
                    children: 'chapterSectionList',
                    label: 'title',
                    value: "id"
                },
                addQuestionFormRules: {
                    questionDescription: [{required: true, message: "题目描述不能为空", trigger: 'blur'},
                        {min: 5, max: 100, message: "题目描述字数在5-100字之间"}],
                    type: [{required: true, message: "请选择题目类型", trigger: 'change'}],
                    option1: [{required: true, message: "第一个选项不能为空", trigger: 'blur'},
                        {min: 1, max: 100, message: "字数在1-100之间"}],
                    option2: [{required: true, message: "第二个选项不能为空", trigger: 'blur'},
                        {min: 1, max: 100, message: "字数在1-100之间"}],
                    difficulty: [{required: true, message: "请选择一个难度", trigger: 'change'}],
                    rightAnswer: [{required: true, message: "请选择正确答案", trigger: 'change'}],
                },
                editQuestionFormRules: {
                    questionDescription: [{required: true, message: "题目描述不能为空", trigger: 'blur'},
                        {min: 5, max: 200, message: "题目描述字数在5-200字之间"}],
                    type: [{required: true, message: "请选择题目类型", trigger: 'change'}],
                    option1: [{required: true, message: "第一个选项不能为空", trigger: 'blur'},
                        {min: 1, max: 100, message: "字数在1-100之间"}],
                    option2: [{required: true, message: "第二个选项不能为空", trigger: 'blur'},
                        {min: 1, max: 100, message: "字数在1-100"}],
                    difficulty: [{required: true, message: "请选择一个难度", trigger: 'change'}],
                    rightAnswer: [{required: true, message: "请选择正确答案", trigger: 'change'}]
                }
            }
        }, created() {
            this.getParams();

            this.axios.get(this.urls.getCourseQuestionList + this.courseId + "/1")
                .then((res) => {
                    if (res.data.code === 200)
                        this.questionTotal = res.data.data.total;
                    this.questionList = res.data.data.data;
                })
            this.axios.get(this.urls.getCourseChapterSectionList + this.courseId)
                .then((res) => {
                    if (res.data.code === 200)
                        this.chapterSection = res.data.data;
                })
        },
        methods: {
            getParams() {
                this.courseId = this.$route.query.courseId;
            },
            addQuestionClick() {
                this.addQuestionVisible = true;
            },
            cascaderChange(value) {
                this.addQuestionFormData.sectionId = value[1];
            },
            editcaderChange(value) {
                this.editQuestionFormData.sectionId = value[1];
            },
            addQuestionSubmit(formName) {
                this.addQuestionFormData.courseId = this.courseId
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.post(this.urls.addCourseQuestion, this.addQuestionFormData)
                            .then((res) => {
                                if (res.data.code === 200)
                                    this.addQuestionVisible = false
                                this.$message.success("添加成功")
                                this.reload();
                            })
                    } else {
                        return false;
                    }
                })

            },
            pageChange(currentPage) {
                this.axios.get(this.urls.getCourseQuestionList + this.courseId + "/" + currentPage)
                    .then((res) => {
                        if (res.data.code === 200)
                            this.questionTotal = res.data.data.total;
                        this.questionList = res.data.data.data;
                    })
            },
            questionEdit(index) {
                console.log(this.questionList[index])
                this.editQuestionFormData.id = this.questionList[index].id
                this.editQuestionFormData.questionDescription = this.questionList[index].questionDescription
                this.editQuestionFormData.type = this.questionList[index].typeId
                this.editQuestionFormData.difficulty = this.questionList[index].difficultyId
                this.editQuestionFormData.sectionId = this.questionList[index].sectionId
                this.editQuestionFormData.rightAnswer = this.questionList[index].rightAnswer
                this.editQuestionFormData.option1 = this.questionList[index].option1
                this.editQuestionFormData.option2 = this.questionList[index].option2
                this.editQuestionFormData.option3 = this.questionList[index].option3
                this.editQuestionFormData.option4 = this.questionList[index].option4
                this.editQuestionVisible = true;
            },
            updateQuestionSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.axios.post(this.urls.updateCourseQuestion, this.editQuestionFormData)
                            .then((res) => {
                                if (res.data.code === 200) {

                                    this.$message.success("更新成功")
                                    this.editQuestionVisible = false;
                                    this.reload();
                                }
                            })
                    } else {
                        return false;
                    }
                })
            },
            questionDelete(index, row) {
                this.$confirm("确定要删除这一题吗？", "删除", {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.get(this.urls.deleteCourseQuestion + row.id)
                        .then((res) => {
                            if (res.data.code === 200) {
                                this.$message.success("删除成功")
                                this.reload()
                            }
                        })
                })

            }
        }
    }
</script>

<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>